<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>隐藏列</title>
    <script type="text/javascript" src="../../jquery.js"></script>
    <script src="../../ui/om-core.js"></script>
    <script src="../../ui/om-mouse.js"></script>
    <script src="../../ui/om-resizable.js"></script>
    <script type="text/javascript" src="../../ui/om-grid.js"></script>
    <script type="text/javascript" src="../common/js/themewriter.js"></script>
    <link rel="stylesheet" type="text/css" href="../common/css/demo.css" />
    <!-- view_source_begin -->
    <script type="text/javascript">
        function showRowdata(index, e){
        	var data = $("#grid").omGrid("getData").rows[index];
        	var result = "ID：<font color = 'blue'>" + data.id + "</font> 开始IP: <font color = 'blue'>" + data.start 
        	+  " </font> 结束IP：<font color = 'blue'>" + data.end + "</font> 地区：<font color = 'blue'>" 
        	+ data.city + " </font> 地址：<font color = 'blue'>" + data.address + "</font>";
        	$("#result").html("<font color = 'red' size='4'>您选择的行数据是</font><br/>"+result);
        	 if ( e && e.stopPropagation )
                 //因此它支持W3C的stopPropagation()方法
                 e.stopPropagation();
             else
                 //否则，我们需要使用IE的方式来取消事件冒泡
                 window.event.cancelBubble = true;
        }
        //var data;
        $(document).ready(function() {
            $('#grid').omGrid({
                title: "内容",
                dataSource : 'column-hide-data.json',
                limit : 0,
                height : 300,
                width : 650,
                showIndex : true,
                colModel : [ {header : '开始IP', name : 'start', width : 120, align : 'left'}, 
                             {header : '结束IP', name : 'end', width : 120, align : 'left'},
                             {header : '地区', name : 'city', width : 100, align : 'left'}, 
                             {header : '详情', name : 'operation', width: "autoExpand", align:'center', renderer:function(colValue, rowData, rowIndex){
                            	 var data = rowData;
                            	 return '<button onClick="showRowdata('+rowIndex+',event)">详情</button>';
                             }}
                             ]
            });
        });
    </script>
    <!-- view_source_end -->
</head>
<body>
    <!-- view_source_begin -->
    <table id="grid"></table>
    <br/>
    <div id="result"></div>
    <!-- view_source_end -->
    <div id="view-desc">
        在omGrid中隐藏某列，只需要在colModel中不提供该列的表头信息即可。获取任意一行数据，都包括了隐藏列的数据。
        在omGrid中隐藏分页条非常简单，只需要设置limit=0即可。
    </div>
</body>
</html>